<template>
  <page-frame>
    <div class="consultingDetail">
      <div class="toptitle">
        <div class="left">问题上报-详情</div>
        <div class="right">
          <div class="btns">
            <el-button @click="submit('visitRecordData')" v-if="record==true" class="lightGreenBtn">提交</el-button>
            <el-button @click="back" >返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <!--base info-->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="提出人" prop="proposer">
                <span v-model="ruleForm.proposer">{{ruleForm.proposer}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="contact">
                <span v-model="ruleForm.contact">{{ruleForm.contact}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="关联会员" prop="memberId">
                <span v-model="ruleForm.memberName">{{ruleForm.memberName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="床位" prop="location">
                <span v-model="ruleForm.location">{{ruleForm.location}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="问题类型" prop="woTypeName">
                <span v-model="ruleForm.woTypeName">{{ruleForm.woTypeName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上报时间" prop="createTime">
                <span v-model="ruleForm.createTime">{{ruleForm.createTime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="问题描述" prop="woDesc" class="edit">
                <div class="desc" v-html="ruleForm.woDesc"></div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="记录人" prop="currentName">
                <span v-model="ruleForm.currentName">{{ruleForm.currentName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="指派责任人" prop="dutyPersonName">
                <span v-model="ruleForm.dutyPersonName">{{ruleForm.dutyPersonName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--record info-->
        <el-row>
          <el-col :span="24" class="followRecord">
            <span>跟进记录</span>
          </el-col>
        </el-row>
        <div v-for="(item,index) in followCheckComplainDetail">
          <el-form label-width="120px">
            <el-row>
              <el-col :span="22" style="">
                <el-form-item label="处理描述" prop="description">
                  <div class="desc" v-html="item.description"></div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="处理人" prop="slover">
                  <span v-model="item.slover">{{item.slover}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理时间" prop="solveTime">
                  <span v-model="item.solveTime">{{item.solveTime}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否已解决" prop="status">
                  <el-radio-group v-model="item.status">
                    <el-radio :label="1" disabled>是</el-radio>
                    <el-radio :label="0" disabled>否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="borderT" v-if="index!=followCheckComplainDetail.length-1"></div>
        </div>
        <!--visit record-->
        <el-row>
          <el-col :span="24" class="followRecord">
            <span>回访记录</span>
            <el-button type="primary" @click="record=true" size="small" style="float:right;margin-top:6px;margin-right:5px;">回 访</el-button>
          </el-col>
        </el-row>
        <el-form :model="visitRecordData" :rules="visitRecordRules" ref="visitRecordData" label-width="120px" v-if="record">
          <el-row>
            <el-col :span="12">
              <el-form-item label="回访对象" prop="revisitPerson">
                <el-input v-model="visitRecordData.revisitPerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="满意度" prop="satisfaction">
                <el-radio class="radio" v-model="visitRecordData.satisfaction" label="0">非常满意</el-radio>
                <el-radio class="radio" v-model="visitRecordData.satisfaction" label="1">满意</el-radio>
                <el-radio class="radio" v-model="visitRecordData.satisfaction" label="2">一般</el-radio>
                <el-radio class="radio" v-model="visitRecordData.satisfaction" label="3">不满意</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="回访记录" prop="record">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 5}"
                  placeholder="请在此输入您的回访记录"
                  v-model="visitRecordData.record">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-for="(item,index) in visitRecord">
          <div class="borderT"></div>
          <el-form label-width="120px">
            <el-row>
              <el-col :span="12" style="">
                <el-form-item label="回访对象" prop="revisitPerson">
                  <span v-model="item.revisitPerson">{{item.revisitPerson}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="满意度" prop="satisfactionName">
                  <span v-model="item.satisfactionName">{{item.satisfactionName}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="回访记录" prop="record">
                  <span v-model="item.record">{{item.record}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="回访人" prop="revisitor">
                  <span v-model="item.revisitor">{{item.revisitor}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回访时间" prop="createTime">
                  <span v-model="item.createTime">{{item.createTime}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import consultingComplaintApi from '../../service/serCenter/consultingComplaintApi';
  import commonApi from '../../service/member/commonApi'
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  export default {
    methods: {
      init(){
        this.currentWoId = this.$route.params.woId;
        this.getDetailInfo(this.currentWoId);
      },
      /**
       * 加载基本信息
       */
      getDetailInfo(woId){
        let self = this;
        consultingComplaintApi.getComplainDetail(woId).then(
          (response)=>{
            //baseInfo
            self.ruleForm.proposer = response.data.data.proposer;
            self.ruleForm.contact = response.data.data.contact;
            self.ruleForm.memberName = response.data.data.memberName;
            self.ruleForm.createTime = response.data.data.createTime;
            self.ruleForm.location = response.data.data.location;
            self.ruleForm.woTypeName = response.data.data.woTypeName;
            self.ruleForm.woDesc = response.data.data.woDesc;
            self.ruleForm.currentName = response.data.data.currentName;
            self.ruleForm.dutyPersonName = response.data.data.dutyPersonName;
            //follow record
            self.followCheckComplainDetail = response.data.data.lists;
            //visit record
            self.visitRecord = response.data.data.records;
            //switch satisfaction
            for(let i=0;i<self.visitRecord.length;i++){
              if(self.visitRecord[i].satisfaction==0){
                self.visitRecord[i].satisfactionName = '非常满意';
              }else if(self.visitRecord[i].satisfaction==1){
                self.visitRecord[i].satisfactionName = '满意';
              }else if(self.visitRecord[i].satisfaction==2){
                self.visitRecord[i].satisfactionName = '一般';
              }else{
                self.visitRecord[i].satisfactionName = '不满意';
              }
            }
          }
        );
      },
      /**
       * 提交
       */
      submit(formName){
        let self = this;
        self.visitRecordData.woId = self.currentWoId;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            consultingComplaintApi.visitRecord(self.visitRecordData).then(
              (response)=>{
                if(response.data.status==200){
                  self.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  self.$router.push({name:'consultingComplaint'});
                }
              }
            );
          } else {
            return false;
          }
        });
      },
      /**
       * 返回
       */
      back(){
        this.$router.push({name:'consultingComplaint'})
      },
    },
    mounted: function () {
      this.init();
    },
    components:{

    },
    data () {
      return {
        currentWoId:null,
        ruleForm: {
          proposer: "",
          contact:'',
          memberName: '',
          location:'',
          createTime:'',
          woDesc: "",
          woTypeName:'',
          currentName:'',
          status:1,
          dutyPersonName:'',
        },
        followCheckComplainDetail:[],
        visitRecord:[],
        visitRecordData:{
          woId:null,
          revisitPerson:'',
          satisfaction:'',
          record:''
        },
        visitRecordRules:{

        },
        rules:{

        },
        record:false,
      }
    },
  }
</script>
<style>
  .consultingDetail .file-content{
    width:80%;
    margin:50px auto;
  }

  .consultingDetail .el-textarea{
    width:91%!important;
  }

  .consultingDetail .el-form-item__content span,
  .consultingDetail .el-form-item__content .desc{
    color: #48576a;
  }

  .consultingDetail .followRecord{
    padding-left: 50px;
    font-size: 18px;
    margin: 20px 0;
    background-color: #f9f9f9;
    line-height: 40px;
    height:40px;
  }
</style>
